<template>
	<body-wrap>
		<view class="top">
			<banner :categoryId='11001'/>
			<!-- <image class="img" :src="imgUrlPrefix+'static/images/topbg.jpg'" mode="widthFix"></image> -->
		</view>
		<view class="indexMain">
			<image class="lxcLogo" :src="imgUrlPrefix+'static/images/lxc.png'" mode="widthFix"></image>
			<view class="my-font-family title">孝诚社工</view>
			<view class="topItemBox my-font-family">
				<navigator :url="`/pages/news/news?ctgid=${dt.id}&title=${dt.name}`" class="item" v-for="dt in bfList" :key="dt.id">
					<view class="tp">{{dt.name}}</view>
					<view class="iconbox">
						<image :src="dt.imageUrl" mode="scaleToFill"></image>
					</view>
				</navigator>
				
			</view>
			<view class="imgTitle">
				<image class="img" :src="imgUrlPrefix+'static/images/t1.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="uul">
			<view class="uli" v-for="(dt,index) in news" :key="dt.id">
				<view class="lkto" @click="goDetails(dt)">
					<view class="liImgBox">
						<image :src="dt.imageUrl" mode="widthFix"></image>
					</view>
					<view class="my-font-family txt">
						<view class="tit">{{dt.title}}</view>
						<view class="con" v-html="dt.content"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainbtbox">
			<navigator url="/pages/service/service" open-type="switchTab" class="imgTitle">
				<image class="img" :src="imgUrlPrefix+'static/images/t2.png'" mode="widthFix"></image>
			</navigator >
		</view>
		<!-- {{msg}}-{{userName}} -->
		
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	//import cFooter from "@/components/cFooter/cFooter.vue"
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {getCategoryList,getNewsList} from '@/api/index.js'
	import {setStorage} from '@/utils/common.js'
	import banner from "@/components/banner/banner.vue"
	export default defineComponent({
		components:{
			bodyWrap,
			//cFooter
			banner
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				msg:'123459',
				userName:computed(()=>store.state.base.userName),
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				bfList:[],
				news:[]
			})
			
			onLoad((options)=>{
				
			})
			
			onShow(()=>{
				
			})

			onMounted(async ()=>{
				// setTimeout(()=>{
				// 	state.msg = '78999'
				// 	store.commit('base/set_userName','yuss')
				// },2000)
				
				
				getCategoryList({
					parentId:11004,
					state:1
				}).then(res =>{
					state.bfList = res.data
				})
				getList()
			})
			
			const getList = ()=>{
				getNewsList({
					pageNumber:1,
					pageSize:3,
					publishState:2
				}).then(res =>{
					if(res.code !=0) return
					state.news = res.data.list
				})
			}
			
			const goDetails = item =>{
				setStorage('newsDetails',JSON.stringify(item))
				uni.navigateTo({
					url:`/pages/news/details/details?id=${item.id}`
				})
			}
			
			return {
				...toRefs(state),
				goDetails
			}
		}
	})
</script>

<style lang="scss" scoped>
	.top{
		width: 100%;
		height: 450rpx;	
		overflow: hidden;
		position: relative;
		z-index: 10;
		box-sizing: border-box;
		.img{
			width: 100%;
			height: auto;
			padding: 0;
			margin: 0;
			will-change: transform
		}
	}
	.indexMain{
		box-sizing: border-box;
		position: relative;
		z-index: 11;
		width: 100%;
		background: #fcf7ee;
		border-top-left-radius:30rpx ;
		border-top-right-radius:30rpx ;
		margin: -50rpx 0 0 0;
		padding: 0 30rpx 30rpx 30rpx;
		.lxcLogo{
			display: block;
			width: 200rpx;
			height: auto;
			position: absolute;
			top: -100rpx;
			left: 50rpx;
			z-index: 12;
		}
		.title{
			font-size: 34rpx;
			font-weight: 600;
			text-align: center;
			padding: 40rpx 0 0 0;
		}
		.topItemBox{
			display: flex;
			padding: 52rpx 0 0 0;
			width: 100%;
			position: relative;
			z-index: 1;
			.item,a{
				flex: 1;
				height: 280rpx;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx #f2ede3;
				overflow: hidden;
				&+.item{
					margin: 0 0 0 20rpx;
				}
				.tp{
					font-size: 30rpx;
					text-align: center;
					height: 46rpx;
					line-height: 46rpx;
					margin: 33rpx 0 13rpx 0;
				}
				.iconbox{
					width: 140rpx;
					height: 140rpx;
					margin: 0 auto;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.imgTitle{
			display: block;
			width: 100%;
			height:137rpx ;
			margin: -20rpx 0 0 0;
			position: relative;
			z-index: 2;
			.img{
				display: block;
				width: 100%;
				height: auto;
			}
		}
	}
	.uul{
		width: 100%;
		background: #fcf7ee;
		padding: 0;
		.uli{
			padding: 36rpx 30rpx;
			background: #fff;
			margin: 0;
			&+.uli{
				margin-top: 20rpx;
			}
			.lkto{
				display: flex;
				.liImgBox{
					width: 350rpx;
					height: 200rpx;
					background: #b9b9b9;
					overflow: hidden;
					image{
						width: 100%;
					}
				}
				.txt{
					flex: 1;
					padding: 0 0 0 30rpx;
					line-height: normal;
					.tit{
						font-size: 32rpx;
						font-weight: 600;
						text-align: left;
						height: 90rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.con{
						height: 120rpx;
						font-size: 28rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						line-clamp: 3;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
	.mainbtbox{
		background: #fcf7ee;
		padding:20rpx 30rpx ;
		.imgTitle{
			width: 100%;
			height:76rpx ;
			margin: 0;
			image{
				width: 100%;
			}
		}
	}
</style>
